<template>
	<view class="content">
		<view class="like-nape" :class="{'line' : status == 2 && type == 'mycircle'}" v-for="item in circleList"
			:key="item.id">
			<view class="reject" v-if="status == 2 && type == 'mycircle' && item.status == 3">
				驳回原因：{{item.reject_reason}}</view>
			<view class="like-column" @click="toDetail(item.id)">
				<view class="like-left">
					<image :src="item.image" mode="aspectFit"></image>
					<view class="like-detail">
						<view class="detail-title">{{item.title}}</view>
						<view class="detailhot">
							关注:&nbsp;&nbsp;{{item.follow}}&nbsp;&nbsp;&nbsp;帖子:&nbsp;&nbsp;{{item.posts}}</view>
					</view>
				</view>
				<view class="like-button" v-if="type == 'circle' && item.follow_status == 0"
					@click.stop="attention(item.id)">关注</view>
				<view class="like-button" v-if="type == 'circle' && item.follow_status == 1"
					@click.stop="cancleSub(item.id)">取消关注</view>
				<view class="like-button" v-if="status == 1 && type == 'mycircle'" @click.stop="cancleSub(item.id)">取消关注
				</view>
				<view class="sub-status" style="color:#FF9956;font-size:32rpx;"
					v-if="status == 2 && type == 'mycircle' && item.status == 1">待审核</view>
				<view class="sub-status" style="color:#3AB74E;font-size:32rpx;"
					v-if="status == 2 && type == 'mycircle' && item.status == 2">发布中</view>
				<view class="sub-status" style="color:#FF0000;font-size:32rpx;"
					v-if="status == 2 && type == 'mycircle' && item.status == 3">已驳回</view>
			</view>
			<!-- 频道修改 -->
			<view class="posts-alter" v-if="status == 2">
				<view class="alters" @click="modifyCircle(item.id)">
					<image src="/static/forum/alter.png" modex="aspectFit"></image>
					<text>修改频道</text>
				</view>
				<view class="delete" @click="deletepost(item.id)">
					<image src="/static/forum/dell.png" modex="aspectFit"></image>
					<text>删除频道</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		props: ['status', 'type', 'circleList', 'newIndex'],
		data() {
			return {
				adminImgPath: app.globalData.adminImgPath,
			}
		},
		watch: {
			type: {
				handler(newName, oldName) {
					// console.log('type------>', newName)
				},
				immediate: true,
				deep: true
			},
			status: {
				handler(newName, oldName) {
					// console.log('status------>', newName)
				},
				immediate: true,
				deep: true
			},
		},
		methods: {
			// 删除频道
			deletepost(id) {
				uni.showModal({
					title: '是否删除此频道，确认删除请点击删除按钮',
					confirmText: '删除',
					confirmColor: '#F00',
					cancelColor: '#999',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定')
							this.$emit('deleteCircle', id)
						} else {
							// console.log('用户点击取消')
						}
					}
				})
			},
			// 取消关注
			cancleSub(id) {
				uni.showModal({
					title: '确认取消关注此频道',
					confirmColor: '#F00',
					cancelColor: '#999',
					success: res => {
						if (res.confirm) {
							// console.log('用户点击确定')
							this.$emit('cancleSub', id)
						} else {
							// console.log('用户点击取消')
						}
					}
				})
			},
			// 去详情
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/Component/forum/Program/circle/circle-detail/circle-detail?id=' + id
				})
			},
			// 跳转修改频道
			modifyCircle(id) {
				uni.navigateTo({
					url: '/pages/Component/forum/Program/circle/create-circle?type=1&id=' + id
				})
			},
			// 关注频道
			attention(id) {
				this.$emit('attention', id)
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.line {
			margin-bottom: 32rpx;
		}

		.like-nape {
			overflow: hidden;
			background: #FFFFFF;

			.reject {
				padding: 22rpx 32rpx;
				margin: 32rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #FF0000;
				background: #FFF2F2;
				border-radius: 5px;
			}
		}

		.like-column {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 26rpx;
			padding-bottom: 38rpx;

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 10rpx;
			}

			.like-left {
				display: flex;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 18rpx;
				}

				.like-detail {
					margin-left: 20rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.detail-title {
						font-size: 28rpx;
					}

					.detailhot {
						color: #656565;
						font-size: 26rpx;
					}
				}
			}

			.like-button {
				width: 130rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 28rpx;
				font-size: 24rpx;
				color: #FB7A26;
				background: #FFF2D9;
			}

			.sub-status {
				margin-bottom: 50rpx;
			}
		}


		.posts-alter {
			width: 100%;
			display: flex;
			padding: 26rpx;
			background: #FFFFFF;
			margin-bottom: 32rpx;

			.alters {
				width: 48%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 5%;
				background: rgba(255, 241, 204, 0.5);
				border-radius: 18rpx;
				color: #FB7A26;
				font-size: 28rpx;

				>image {
					width: 45rpx;
					height: 45rpx;
					display: block;
					margin-right: 20rpx;
				}
			}

			.delete {
				width: 48%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 5%;
				background: rgba(250, 83, 65, 0.1);
				border-radius: 18rpx;
				color: #FF0000;
				font-size: 28rpx;

				>image {
					width: 45rpx;
					height: 45rpx;
					display: block;
					margin-right: 20rpx;
				}
			}
		}

	}
</style>
